<template>
	<div class="PreviewVideo">
		<a-modal
			v-model:open="visible"
			:centered="true"
			width="100%"
			wrap-class-name="full-modal"
			:footer="null"
			destroy-on-close
			@cancel="onCancel"
		>
			<div class="carousel-wrap">
				<a-button :class="['change-btn', dataList.length === 1 && 'hidden']" :disabled="activeIndex === 0" @click.stop="prev">
					<global-svg-icon icon-name="arrow-left-s-line" class="change-icon" width="20px" height="20px"></global-svg-icon>
				</a-button>
				<video :src="dataList.length ? dataList[activeIndex].videoUrl : null" controls width="1400" type="video/mp4" autoplay></video>
				<a-button
					:class="['change-btn', dataList.length === 1 && 'hidden']"
					:disabled="dataList.length === 0 || activeIndex === dataList.length - 1"
					@click.stop="next"
				>
					<global-svg-icon class="change-icon" icon-name="arrow-right-s-line" width="20px" height="20px"></global-svg-icon>
				</a-button>
			</div>
		</a-modal>
	</div>
</template>

<script lang="ts" setup>
const emits = defineEmits<{
	(e: 'toggle', value: number | null): void;
}>();

const visible = ref(false);

const dataList = ref<any[]>([]);
const activeIndex = ref(0);
// 上一张
const prev = (): void => {
	if (activeIndex.value === 0) {
		return;
	}
	activeIndex.value--;
	emits('toggle', dataList.value[activeIndex.value].id);
};
// 下一张
const next = (): void => {
	if (activeIndex.value === dataList.value.length - 1) {
		return;
	}
	activeIndex.value++;
	emits('toggle', dataList.value[activeIndex.value].id);
};
// 键盘快捷键切换图片
const switchover = (e: KeyboardEvent): void => {
	if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
		prev();
	} else if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
		next();
	}
};
window.addEventListener('keydown', switchover);

const onCancel = () => {
	console.log('关闭弹窗');
};

const getVisible = () => visible.value;
const openModal = (data: any, index = 0): void => {
	console.log(data, 'dataList');

	dataList.value = data;
	activeIndex.value = index;
	emits('toggle', dataList.value[activeIndex.value].id);
	visible.value = true;
};
defineExpose({
	openModal,
	getVisible
});
</script>

<style lang="less" scoped>
.carousel-wrap {
	box-sizing: border-box;
	display: flex;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
	gap: 12px;

	.change-btn {
		box-sizing: border-box;
		display: flex;
		width: 36px;
		min-width: 36px;
		height: 36px;
		border: 1px solid @borderColor02;
		border-radius: 18px;
		padding: 0;
		background: transparent;

		/* Shadow/button */
		box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.04);
		justify-content: center;
		align-items: center;

		&.hidden {
			visibility: hidden;
		}
	}
}
</style>
